<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="fk" style="margin-left: 30rpx;" @click="handeleBase">
				<image style="width: 20rpx;height: 30rpx;" src="@/static/index/left.png" mode=""></image>
			</view>
			<view class="fk_title">{{$t('我的车辆库')}}</view>
			<view class="fk" style="margin-right: 30rpx;" @click="handeleAdd">
				<image style="width: 35rpx;height: 35rpx;" src="@/static/index/add.png" mode=""></image>
			</view>
		</view>
		<!-- 状态：全部 订单中 空闲 -->
		<view class="index_header_block">
			<view class="index_header">
				<view @click="handeleIndex(index)" :class="indexID===index?'index_block':'index_block_active'"
					v-for="(item,index) in headerList" :key="index">{{$t(item.title)}}</view>
			</view>
		</view>
		<view style="width: 100%;height: 266rpx;"></view>


		<view>
			<scroll-view refresher-enabled="true" :refresher-triggered="freshIsShow" :scroll-top="scrollTop"
				scroll-y="true" class="scroll-Y" @scrolltolower="lower" @refresherrefresh="fresh"
				@refresherrestore="store" refresher-background="#F1F2F4">

				<!-- 订单状态 1空闲    2预定    3订单进行中 -->

				<view v-for="(item,index) in list" :key="index" v-if="list.length !=0">
					<!-- 预定 -->
					<view @click="handeleDetail(item)" class="index_block1" v-if="item.status === 2">
						<view class="index_block1_padding">
							<!-- 名称 -->
							<view class="index_block1_padding1">
								<view class="index_block1_padding2">
									<image style="width: 30rpx;height: 24rpx;" src="@/static/index/card.png" mode="">
									</image>
								</view>
								<view class="index_block1_padding3">
									<view class="index_block1_padding4">
										<view class="index_block1_padding5">{{item.car_number}}</view>
										<view style="width: 100%;display: flex;align-items: center;">
											<view class="index_block1_padding6">{{$t('已预定')}}</view>
											<view v-if="item.current_city" class="location">
												{{$t('当前位置')}}：{{lang=='zh'?item.current_city.shortname:item.current_city.shortname_ru}}
											</view>
										</view>
									</view>
									<view class="index_block1_padding7">
										<view class="index_block1_padding8">
											<image style="width: 24rpx;height: 24rpx;" src="@/static/index/edit.png"
												mode="">
											</image>
										</view>
										<view class="index_block1_padding8"
											@click.stop="handeleAdmin(item.id,index,item)">
											{{$t('管理')}}
										</view>
									</view>
								</view>
							</view>
							<view class="index_block1_padding11">
								<view class="index_block1_padding12">
									<view>
										<view>{{$t('载重')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">{{item.product_weight}}kg</view>
									</view>
									<view style="margin-left: 69rpx;">
										<view>{{$t('体积')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">{{item.product_volume}}m³</view>
									</view>
									<view style="margin-left: 69rpx;"
										v-if="item.car_l !==0 || item.car_w !==0 || item.car_h !==0">
										<view>{{$t('车长')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.car_l?item.car_l:0}}x{{item.car_w?item.car_w:0}}x{{item.car_h?item.car_h:0}}m
										</view>
									</view>
								</view>
								<view v-if="item.status == 2 && item.order.release.give_install_time"
									class="index_block1_padding14">
									{{$t('距离接货日还有')}}{{setDayInt(item.order.release.give_install_time)}}{{$t('天')}}
								</view>
							</view>
							<view class="newOrders">
								<view style="font-size: 24rpx;font-weight: bold;color: #FFFFFF;">{{$t('正在寻找订单')}}</view>
								<view class="newOrders-line"></view>
								<view style="height: 54rpx;flex: 1;display: flex;align-items: center;">
									<u-notice-bar duration="3000" fontSize="24rpx" style="padding:  0rpx ;"
										class="custom-notice-bar" color="#FFFFFF" bgColor=" #30F998" icon=""
										:text="lang=='zh'?item.noticeList:item.noticeList_ru"
										direction="column"></u-notice-bar>
								</view>
							</view>
						</view>
					</view>
					<!-- 空闲 -->
					<view @click="handeleDetail(item)" class="index_block1" v-if="item.status === 1">
						<view class="index_block1_padding">
							<!-- 名称 -->
							<view class="index_block1_padding1">
								<view class="index_block1_padding2">
									<image v-if="item.mode=='汽运'" style="width: 30rpx;height: 24rpx;"
										src="@/static/icon/type1.png" mode="" />
									<image v-if="item.mode=='火车'" style="width: 30rpx;height: 24rpx;"
										src="@/static/icon/type2.png" mode="" />
									<image v-if="item.mode=='海运'" style="width: 30rpx;height: 24rpx;"
										src="@/static/icon/type3.png" mode="" />
									<image v-if="item.mode=='空运'" style="width: 30rpx;height: 24rpx;"
										src="@/static/icon/type4.png" mode="" />

								</view>
								<view class="index_block1_padding3">
									<view class="index_block1_padding4">
										<view class="index_block1_padding5">{{item.car_number}}</view>
										<view style="width: 100%;display: flex;align-items: center;">
											<view class="index_block1_padding6k">{{$t('空闲')}}</view>
											<view v-if="item.current_city" class="location">
												{{$t('当前位置')}}：{{lang=='zh'?item.current_city.shortname:item.current_city.shortname_ru}}
											</view>
										</view>
									</view>
									<view class="index_block1_padding7k">
										<view class="index_block1_padding8"
											@click.stop="handeleAdmin(item.id,index,item)">
											{{$t('管理')}}
										</view>
									</view>
								</view>
							</view>
							<view class="index_block1_padding11">
								<view class="index_block1_padding12">
									<view>
										<view>{{$t('载重')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.product_weight?item.product_weight:0}}kg
										</view>
									</view>
									<view style="margin-left: 69rpx;">
										<view>{{$t('体积')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.product_volume?item.product_volume:0}}m³
										</view>
									</view>
									<view style="margin-left: 69rpx;" v-if="item.car_l !==0 || 
									item.car_w !==0 || item.car_h !==0">
										<view>{{$t('车长')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.car_l?item.car_l:0}}x{{item.car_w?item.car_w:0}}x{{item.car_h?item.car_h:0}}m
										</view>
									</view>
								</view>
								<view class="index_block1_padding14k">{{$t('可运输路线')}} : <span
										style="font-size: 32rpx;margin-left: 5rpx;margin-bottom: -6rpx;">{{item.transport_list.length}}</span>
								</view>
							</view>
							<view class="newOrders">
								<view style="font-size: 24rpx;font-weight: bold;color: #FFFFFF;">{{$t('正在寻找订单')}}</view>
								<view class="newOrders-line"></view>
								<view style="height: 54rpx;flex: 1;display: flex;align-items: center;">
									<u-notice-bar duration="3000" fontSize="24rpx" style="padding:  0rpx ;"
										class="custom-notice-bar" color="#FFFFFF" bgColor=" #30F998" icon=""
										:text="lang=='zh'?item.noticeList:item.noticeList_ru"
										direction="column"></u-notice-bar>
								</view>
							</view>
						</view>
					</view>
					<!-- 订单中 -->
					<view @click="handeleDetail(item)" class="order_block" v-if="item.status === 3">
						<view class="order_block1">
							<view class="index_block1_padding1">
								<view class="index_block1_padding2">
									<image style="width: 30rpx;height: 24rpx;" src="@/static/index/card.png" mode="">
									</image>
								</view>
								<view class="index_block1_padding3">
									<view class="index_block1_padding4">
										<view class="index_block1_padding5">{{item.car_number}}</view>
										<view style="width: 100%;display: flex;align-items: center;">
											<view class="index_block1_padding6d">{{$t('订单中')}}</view>
											<view v-if="item.current_city" class="location">
												{{$t('当前位置')}}：{{lang=='zh'?item.current_city.shortname:item.current_city.shortname_ru}}
											</view>
										</view>
									</view>
									<view class="index_block1_padding7k">
										<!-- <view class="index_block1_padding8">
											<image style="width: 18rpx;height: 18rpx;" src="@/static/index/edit.png" mode=""></image>
										</view> -->
										<view class="index_block1_padding8"
											@click.stop="handeleAdmin(item.id,index,item)">
											{{$t('管理')}}
										</view>
									</view>
								</view>
							</view>
							<view class="index_block1_padding11d">
								<view class="index_block1_padding12">
									<view>
										<view>{{$t('载重')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.product_weight?item.product_weight:0}}kg
										</view>
									</view>
									<view style="margin-left: 69rpx;">
										<view>{{$t('体积')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.product_volume?item.product_volume:0}}m³
										</view>
									</view>
									<view style="margin-left: 69rpx;" v-if="item.car_l !==0 || 
									 item.car_w !==0 ||  item.car_h !==0">
										<view>{{$t('车长')}}</view>
										<view style="color: #1D1D1D;margin-top: 6rpx;">
											{{item.car_l?item.car_l:0}}x{{item.car_w?item.car_w:0}}x{{item.car_h?item.car_h:0}}m
										</view>
									</view>
								</view>
								<view class="index_block1_padding14k">{{$t('可运输路线')}} :
									<span
										style="font-size: 32rpx;margin-left: 5rpx;margin-bottom: -4rpx;">{{item.transport_list.length}}</span>
								</view>
							</view>
							<view class="order_padding_bottom">
								<view class="order_padding_bottom1">
									<view>
										<span>{{$t('订单编号')}} ：</span>
										<span>{{item.order_id}}</span>
									</view>
									<view class="order_padding_bottom2" v-if="item.status === 1">{{$t('待开始')}}</view>
									<view class="order_padding_bottom2jx" v-if="item.status === 3">{{$t('进行中')}}</view>
								</view>
								<view class="order_padding_bottom3">
									<view style="display: flex;align-items: center;">
										<span>
											<image v-if="item.order.release.departure.country == 1"
												style="width: 40rpx;height: 20rpx;margin: 0 10rpx;"
												src="@/static/index/ic1.png" mode=""></image>
											<image v-if="item.order.release.departure.country == 0"
												style="width: 40rpx;height: 20rpx;margin: 0 10rpx;"
												src="@/static/index/ic0.png" mode=""></image>
										</span>
										<span v-if="item.order.release.departure.country == 1">{{$t('俄罗斯')}}</span>
										<span v-if="item.order.release.departure.country == 0">{{$t('中国')}}</span>
									</view>
									<view style="display: flex;align-items: center;">
										<span>
											<image v-if="item.order.release.reach.country == 1"
												style="width: 40rpx;height: 20rpx;margin: 0 10rpx;"
												src="@/static/index/ic1.png" mode=""></image>
											<image v-if="item.order.release.reach.country == 0"
												style="width: 40rpx;height: 20rpx;margin: 0 10rpx;"
												src="@/static/index/ic0.png" mode=""></image>
										</span>
										<span v-if="item.order.release.reach.country == 1">{{$t('俄罗斯')}}</span>
										<span v-if="item.order.release.reach.country == 0">{{$t('中国')}}</span>
									</view>
								</view>
								<!-- <view style="height: 50rpx;width: 100%;margin-top: -10rpx;">
									<u-slider :use-slot="true" activeColor="#06C36E" inactiveColor="#FFFFFF"
										blockColor="#FFFFFF" v-model="value" style="width: 670rpx;margin-left: -30rpx;">
									</u-slider>
								</view> -->
								<view style="width: 100%;background-color: #06C36E;height: 5rpx;margin: 25rpx auto;">
								</view>
								<view class="order_padding_bottom4">
									<view style="display: flex;align-items: center;">
										<view>
											{{lang=='zh'?item.order.release.departure.city_name:item.order.release.departure.city_name_ru}}
										</view>
										<view style="display: flex;align-items: center;">
											<image style="width: 72rpx;height: 24rpx;margin : 0 10rpx;"
												src="@/static/index/rrrrr.png" mode=""></image>
										</view>
										<view>
											{{lang=='zh'?item.order.release.reach.city_name:item.order.release.reach.city_name_ru}}
										</view>
									</view>
									<view>{{item.create_at}}</view>
								</view>
							</view>
							<view class="newOrders">
								<view style="font-size: 24rpx;font-weight: bold;color: #FFFFFF;">{{$t('正在寻找订单')}}</view>
								<view class="newOrders-line"></view>
								<view style="height: 54rpx;flex: 1;display: flex;align-items: center;">
									<u-notice-bar duration="3000" fontSize="24rpx" style="padding:  0rpx ;"
										class="custom-notice-bar" color="#FFFFFF" bgColor=" #30F998" icon=""
										:text="lang=='zh'?item.noticeList:item.noticeList_ru"
										direction="column"></u-notice-bar>
								</view>
							</view>
						</view>
						<view class="cardAddress" @click.stop="handelePupItem(3)">{{$t('更新车辆位置')}}</view>
					</view>

				</view>
				<view @click="handelePupItem(3)" v-if="list.length == 0"
					style="margin-top: 100rpx;font-size: 30rox;color:#AAAAAA">{{$t('暂无数据')}}
				</view>
			</scroll-view>
		</view>
		<!-- 更新车辆位置 -->
		<u-popup :show="mapShow" mode="center" round="32" @close="close">
			<view class="mapShowClass">
				<view>
					<map style="width: 552rpx; height:552rpx;" :latitude="latitude" :longitude="longitude"
						:markers="marker" :scale='scale'>
					</map>
				</view>
				<view :class="lang=='zh'?'mapShowCard':'mapShowCard_ru'">{{$t('车辆位置更新')}}</view>
				<view :class="lang=='zh'?'mapShowCardbut':'mapShowCardbut_ru'" @click="setAddress">{{$t('确认更新位置')}}
				</view>
			</view>
		</u-popup>
		<!-- 点击管理弹出 -->
		<u-popup :show="show" bgColor="transparent" @close="close">
			<view class="popupClass">
				<view class="popupClass1">
					<view class="popupClass2">
						<view class="popupClass3">{{$t('管理')}}</view>
						<view class="popupClass4">{{$t('根据自己的需求点击下方按钮')}}</view>
					</view>
					<view class="popupClass6">
						<view @click="handelePupItem(0)" class="popupClass5" style="margin-right: 30rpx;">{{$t('编辑')}}
						</view>
						<view v-if="items.order_id" @click="handelePupItem(1)" class="popupClass5"
							style="margin-right: 30rpx;">{{$t('查看订单')}}</view>
						<view @click="handelePupItem(3)" class="popupClass5">
							<view>{{$t('更新运输工具所在位置')}}</view>
						</view>
					</view>
					<view class="popupClass5-remove" @click="handelePupItem(2)">
						{{$t('删除')}}
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 点击弹出选择当前位置 -->
		<u-popup style="z-index: 1;" :overlay="overlay" mode="center" :show="currentLocation" bgColor="transparent"
			@close="close">
			<view class="pp">
				<view>

					<citySelectV :text="textStart" @confirm="citySelectCbStart" />
				</view>
				<view @click="handeleCurrentLocation" class="cos">{{$t('确认')}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import citySelectV from './components/citySelectV.vue';
	import {
		getList,
		removeOrder,
		currentCity
	} from '@/api/vehicle.js'
	export default {
		components: {
			citySelectV
		},
		data() {
			return {
				overlay: true,
				cityName: '',
				currentLocation: false,
				textStart: this.$t('请选择'),
				id: 0, //删除的id
				title: 'map', //地图标题
				latitude: '', //经度39.909
				longitude: '', //纬度116.39742
				// scale:5,//最小数，缩放范围最大，可见程度最大
				scale: 18,
				marker: [{
					id: 0,
					latitude: '', //经度
					longitude: '', //纬度
					iconPath: '../../static/index/wz.png', //显示的图标
					rotate: 0, // 旋转度数
					width: 25, //宽
					height: 25, //高
					// title: '你在哪了', //标注点名
					alpha: 0.5, //透明
				}, ],

				mapShow: false,
				pupIndex: '',
				pupList: [{
						title: '编辑'
					},
					{
						title: '查看订单'
					},
					{
						title: '删除'
					},
				],
				show: false,
				freshIsShow: true,
				scrollTop: 0,
				value: 30,
				list: [],
				indexID: 0,
				lang: 'zh',
				title: 'Hello',
				headerList: [{
						title: '全部',
					},
					{
						title: '订单中',
					},
					{
						title: '空闲',
					},
				],
				delIndex: '', //删除的数组下标
				page: 1, //页面
				items: {}, //数据
				count: 0, //总条数
				status: '', //状态
				limit: 20,
				user_id: '',
				cityID: ''
			}
		},
		onLoad(options) {
			this.$i18n.locale = options.lang;
			// this.$i18n.locale = 'ru';
			this.lang = options.lang;
			this.user_id = options.user_id
			uni.setStorageSync('lang', options.lang);
			uni.setStorageSync('user_id', options.user_id);
			uni.setStorageSync('token', options.token);
		},
		onShow() {
			this.page = 1
			this.getPosition()
			this.getData()
		},
		methods: {
			setDayInt(timestamp2) {
				if (timestamp2) {
					// 假设两个时间戳
					const timestamp1 = Date.now(); //当前的时间戳
					//timestamp2   到货时间的时间戳 

					// 计算毫秒差
					const diffInMillis = Math.abs(timestamp2 * 1000 - timestamp1);

					// 将毫秒差转换为天数（1000毫秒 * 60秒 * 60分钟 * 24小时）
					const diffInDays = diffInMillis / (1000 * 60 * 60 * 24);
					return diffInDays // 输出相差的天数
				}
			},
			// 更新位置确定函数
			handeleCurrentLocation() {
				uni.showLoading()
				let data = {
					id: this.id,
					current_city_id: this.cityID
				}
				currentCity(data).then(res => {
					uni.hideLoading()
					if (this.lang == 'zh') {
						this.list[this.delIndex].current_city.shortname = this.textStart
					} else {
						this.list[this.delIndex].current_city.shortname_ru = this.textStart
					}
					this.currentLocation = false
					setTimeout(() => {
						this.delIndex = ''
					}, 500)
				})
			},
			// 选择的省市区
			citySelectCbStart(value) {
				this.textStart = value.column3.label
				this.cityID = value.column3.value
			},
			// 返回上一页
			handeleBase() {
				uni.webView.navigateBack();
			},
			// 新增
			handeleAdd() {
				uni.navigateTo({
					url: '/pages/index2/form?type=' + 'add'
				})
			},
			// 详情
			handeleDetail(item) {
				uni.navigateTo({
					url: '/pages/index2/form?items=' + JSON.stringify(item) + '&isdisabled=' + true + '&type=' +
						'detail'
				})
			},
			// 获取数据
			getData() {
				uni.showLoading({
					title: this.$t('加载中') + '...'
				})
				let data = {
					page: this.page,
					status: this.status,
					limit: this.limit,
					// user_id: '3847'
					user_id: this.user_id
				}
				getList(data).then(res => {
					if (this.page === 1) {
						this.list = res.data.data.list
					} else {
						this.list = [...this.list, ...res.data.data.list]
					}
					this.count = res.data.data.count
					uni.hideLoading()
					this.page++
					this.freshIsShow = false //修改下拉刷新状态
				})
			},
			// 弹出车辆位置弹窗
			setCardAddress() {
				this.mapShow = !this.mapShow
			},
			// 更新车辆位置
			setAddress() {
				this.getPosition()
			},
			//获取定位信息
			getPosition() {
				uni.showLoading({
					title: this.$t('加载中') + '...'
				})
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						this.latitude = res.latitude //经度39.909
						this.longitude = res.longitude //纬度116.39742
						this.marker[0].latitude = res.latitude
						this.marker[0].longitude = res.longitude
						let x = 10; // X是你想要的上限
						this.marker[0].id = Math.floor(Math.random() * x);
						uni.hideLoading()
					},
				})
			},
			// 关闭弹窗
			close() {
				this.show = false
				this.mapShow = false
				this.pupIndex = ''
			},
			// 点击管理函数
			handeleAdmin(id, index, item) {
				this.delIndex = index //删除的下标
				this.id = id //删除的ID
				this.items = item
				this.show = !this.show //控制弹窗显示
				if (this.lang == 'zh') {
					if (item.current_city.shortname) {
						this.textStart = item.current_city.shortname
					} else {
						this.textStart = this.$t('请选择')
					}
				} else {
					if (item.current_city.shortname_ru) {
						this.textStart = item.current_city.shortname_ru
					} else {
						this.textStart = this.$t('请选择')
					}
				}
			},

			handelePupItem(index) {
				this.show = false
				this.mapShow = false
				this.pupIndex = index
				if (index === 2) {
					// 删除运输列表
					uni.showModal({
						title: this.$t('确认删除'),
						content: this.$t('是否确认删除当前车辆'),
						cancelText: this.$t('取消'),
						confirmText: this.$t('确定'),
						success: res => {
							if (res.confirm) {
								let data = {
									id: this.id
								}
								removeOrder(data).then(res => {
									uni.showToast({
										title: this.$t('删除成功'),
										icon: 'none'
									})
									this.list.splice(this.delIndex, 1)
									this.pupIndex = ''
								})
							} else if (res.cancel) {
								this.pupIndex = ''
							}
						}
					});
				} else if (index === 0) {
					// 编辑
					uni.navigateTo({
						url: '/pages/index2/form?id=' + this.id + '&items=' + JSON.stringify(this.items) +
							'&type=' + 'edit'
					})
					this.pupIndex = ''
				} else if (index === 1) {

					// 跳转至订单页
					uni.webView.navigateTo({
						url: '/pages/order/published/published?id=' + 1585 + '&status=' + 0 + '&isDetail=' + true
					});
				} else if (index === 3) { //更新车辆位置
					// 调接口返回
					setTimeout(() => {
						this.currentLocation = true
					}, 500)
				}
			},
			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1
				this.freshIsShow = true
				this.getData()
				setTimeout(() => {
					this.freshIsShow = false
				}, 2000)
			},
			// 触底加载
			async lower() {
				console.log(this.list.length);
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.total > this.list.length) {
					await this.getData()
				}
			},
			// 顶部导航栏选择
			handeleIndex(index) {
				uni.showLoading({
					title: this.$t('加载中') + '...'
				})
				this.page = 1
				this.indexID = index
				// 不传或传0 代表全部， 传1 状态空闲 ，传3 状态进行中
				let data = {}
				if (index === 0) { //0 全部
					this.status = ''
					data = {
						page: this.page,
						status: '',
						limit: this.limit,
						user_id: this.user_id
					}
				} else if (index === 1) { //订单中
					this.status = 3
					data = {
						page: this.page,
						status: 3,
						limit: this.limit,
						user_id: this.user_id
					}
				} else if (index === 2) { //空闲
					this.status = 1
					data = {
						page: this.page,
						status: this.status,
						limit: this.limit,
						user_id: this.user_id
					}
				}
				getList(data).then(res => {
					this.list = res.data.data.list
					uni.hideLoading()
				})
			},
			// 获取当前语言
			getLang() {
				console.log('this.$i18n.locale:', this.$i18n.locale);
				this.lang = this.$i18n.locale
			},
			// 语言
			setLang(index) {
				if (index == 1) {
					this.$i18n.locale = 'zh'
				} else {
					this.$i18n.locale = 'ru'
				}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				// title: this.$t("推送列表")
				// title: "路线管理"
			})
		},
	}
</script>

<style scoped>
	.location {
		min-width: 108rpx;
		height: 25rpx;
		display: inline-flex;
		font-size: 18rpx;
		background: #FF5D5D;
		color: #FFFFFF;
		border-radius: 25rpx;
		text-align: center;
		line-height: 25rpx;
		padding: 3rpx 10rpx;
		margin-left: 12rpx;
	}

	.cos {
		width: 50%;
		height: 80rpx;
		background-color: #000000;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.pp {
		width: 690rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.custom-notice-bar {

		border: none;
		background: linear-gradient(to right, #17A2CC, #2EF29B);
	}

	.popupClass5-remove {
		width: 100%;
		height: 85rpx;
		text-align: center;
		line-height: 85rpx;
		background: #F2F3F7;
		border-radius: 24rpx;
		margin-top: 30rpx;
		color: #1B795D;
		font-size: 28rpx;
	}

	.newOrders-line {
		height: 30rpx;
		width: 1rpx;
		background-color: #FFFFFF;
		margin-left: 28rpx;
		margin-right: 30rpx;
	}

	.newOrders {
		width: 650rpx;
		height: 54rpx;
		background: linear-gradient(270deg, #30F998 0%, #0D7DE2 98%);
		border-radius: 37rpx;
		padding: 15rpx 20rpx 15rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.mapShowCardbut_ru {
		width: 552rpx;
		height: 100rpx;
		border-radius: 24rpx;
		background: linear-gradient(90deg, #08C490 0%, #18E781 100%);
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 45rpx;
	}

	.mapShowCardbut {
		width: 552rpx;
		height: 100rpx;
		border-radius: 24rpx;
		background: linear-gradient(90deg, #08C490 0%, #18E781 100%);
		line-height: 100rpx;
		text-align: center;
		font-size: 34Rpx;
		color: #FFFFFF;
		margin-top: 45rpx;
	}

	.mapShowCard_ru {
		width: 100%;
		text-align: center;
		background-color: #FFFFFF;
		font-family: Alimama ShuHeiTi;
		font-size: 45rpx;
		font-weight: bold;
		color: #1BC39A;
		margin-top: -50rpx;
		z-index: 999;
		box-shadow: 0px -10px 40px 10px #FFFFFF;
		letter-spacing: 2rpx
	}

	.mapShowCard {
		width: 100%;
		text-align: center;
		background-color: #FFFFFF;
		font-family: Alimama ShuHeiTi;
		font-size: 80rpx;
		font-weight: bold;
		color: #1BC39A;
		margin-top: -50rpx;
		z-index: 999;
		box-shadow: 0px -10px 40px 10px #FFFFFF;
		letter-spacing: 2rpx
	}

	.mapShowClass {
		width: 690rpx;
		height: 870rpx;
		padding: 69rpx 69rpx 52rpx 69rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(180deg, #18C299 0%, #FFFFFF 70%);
		border-radius: 32rpx;
	}

	.popupClass6 {
		width: 100%;
		height: 171rpx;
		display: flex;
		align-items: center;
		/* justify-content: space-around; */
		margin-top: 55rpx;
	}

	.popupClass5 {
		position: relative;
		width: 210rpx;
		height: 171rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		text-align: center;
		/* 文本居中 */
		overflow-wrap: break-word;
		/* 自动换行 */



		border-radius: 24rpx;
		background: linear-gradient(128deg, #46DFCD -3%, #42D5A9 100%);
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.popupClass5_active {
		width: 210rpx;
		height: 171rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		text-align: center;
		/* 文本居中 */
		overflow-wrap: break-word;
		/* 自动换行 */
		border-radius: 24rpx;
		background: #F2F3F7;
		font-size: 28rpx;
		color: #1B795D;
	}

	.popupClass4 {
		font-family: Alibaba PuHuiTi 3.0;
		font-size: 28rpx;
		font-weight: normal;
		color: #179F7A;
		margin-top: 20rpx;
		letter-spacing: 3rpx
	}

	.popupClass3 {
		font-family: Alimama ShuHeiTi;
		font-size: 50rpx;
		font-weight: bold;
		color: #179F7A;
	}

	.popupClass2 {
		margin-top: 80rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popupClass1 {
		width: 100%;
		height: 620rpx;
		border-radius: 32rpx 32rpx 0px 0px;
		background: linear-gradient(180deg, rgba(24, 194, 153, 0.25) 12%, rgba(255, 255, 255, 0) 61%), #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.popupClass {
		width: 100%;
		height: 620rpx;
		display: flex;
		flex-direction: column;
		/* background: linear-gradient(180deg, rgba(24, 194, 153, 0.25) 12%, rgba(255, 255, 255, 0) 61%), #FFFFFF; */
		justify-content: flex-end;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 266rpx);
	}

	.cardAddress {
		position: absolute;
		bottom: -26rpx;
		min-width: 276rpx;
		height: 53rpx;
		border-radius: 200rpx;
		background: #06C36E;
		font-size: 22rpx;
		display: inline-block;
		line-height: 53rpx;
		text-align: center;
		color: #FFFFFF;
		padding: 0 15rpx;
	}

	.order_padding_bottom4 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		margin-top: 15rpx;
	}

	.righticon {
		width: 24rpx;
		height: 24rpx;
		display: flex;
		align-items: center;
	}

	.order_padding_bottom3 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		margin-top: 35rpx;
	}

	.order_padding_bottom2jx {
		display: inline-block;
		min-width: 81rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #F32929;
		font-size: 16rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 22rpx;
		padding: 0 15rpx;
	}

	.order_padding_bottom2 {
		display: inline-block;
		min-width: 81rpx;
		height: 22rpx;
		border-radius: 22rpx;
		background: #FF7102;
		font-size: 16rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 22rpx;
		padding: 0 15rpx;
	}

	.order_padding_bottom1 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
	}

	.order_padding_bottom {
		width: 100%;
		height: 226rpx;
		border-radius: 32rpx;
		margin-top: 27rpx;
		background: #F6F7FB;
		padding: 20rpx;
		box-sizing: border-box;
		/* padding和border包含在宽度内 */
	}

	.order_block1 {
		width: 650rpx;
		min-height: 487rpx;
	}

	.order_block {
		width: 690rpx;
		min-height: 537rpx;
		border-radius: 32rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 60rpx;
	}

	.index_block1_padding14k {
		width: 210rpx;
		height: 32rpx;
		font-size: 22rpx;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

	}

	.index_block1_padding14 {
		display: inline-block;
		min-width: 210rpx;
		height: 32rpx;
		border-radius: 32rpx;
		background: #F32929;
		text-align: center;
		line-height: 32rpx;
		font-size: 16rpx;
		padding: 0 15rpx;
		color: #FFFFFF;
	}



	.index_block1_padding13 {
		width: 100%;
		height: 23rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
	}

	.index_block1_padding12 {
		flex: 1;
		width: 100%;
		height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #999999;
		font-size: 22rpx;
	}

	.index_block1_padding11d {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 37rpx;
	}

	.index_block1_padding11 {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.index_block1_padding5 {
		width: 350rpx;
		font-size: 28rpx;
		font-weight: normal;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.index_block1_padding6d {
		display: inline-block;
		min-width: 89rpx;
		height: 30rpx;
		padding: 0 10rpx;
		background: #F32929;
		color: #FFFFFF;
		border: none;
		border-radius: 32rpx;
		text-align: center;
		line-height: 30rpx;
		font-size: 18rpx;
	}

	.index_block1_padding6k {
		display: inline-block;
		min-width: 89rpx;
		height: 30rpx;
		padding: 0 10rpx;
		background: #00A5FD;
		color: #FFFFFF;
		border: none;
		border-radius: 32rpx;
		text-align: center;
		line-height: 30rpx;
		font-size: 18rpx;
	}

	.index_block1_padding6 {
		display: inline-block;
		min-width: 89rpx;
		height: 30rpx;
		padding: 0 10rpx;
		background: #FF7102;
		color: #FFFFFF;
		border: none;
		border-radius: 32rpx;
		text-align: center;
		line-height: 30rpx;
		font-size: 18rpx;
	}

	.index_block1_padding8 {
		min-width: 64rpx;
		height: 45rpx;
		border-radius: 40rpx;
		background-color: #000000;
		display: flex;
		font-size: 22rpx;
		color: #FFFFFF;
		align-items: center;
		justify-content: center;
		padding: 0 15rpx 0 15rpx;
	}

	.index_block1_padding7k {
		width: 211rpx;
		height: 60rpx;
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
	}

	.index_block1_padding7 {
		width: 211rpx;
		height: 60rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.index_block1_padding4 {
		flex: 1;
		width: 100%;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index_block1_padding3 {
		flex: 1;
		width: 100%;
		height: 70rpx;
		margin-left: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.index_block1_padding2 {
		width: 70rpx;
		height: 70rpx;
		border-radius: 60rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000000;
	}

	.index_block1_padding1 {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.index_block1_padding {
		width: 650rpx;
		min-height: 205rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index_block1 {
		width: 690rpx;
		min-height: 251rpx;
		border-radius: 32rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}



	.index_header_block {
		z-index: 2;
		width: 100%;
		height: 112rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: #F1F2F4;
		position: fixed;
		top: 154rpx;
		left: 0;
	}

	.fk_title {
		font-size: 40rpx;
		font-weight: 500;
	}

	.fk {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header {
		z-index: 2;
		width: 100%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 50rpx;
		left: 0;
		background-color: #F1F2F4;
	}

	.index_block {
		width: 330rpx;
		height: 70rpx;
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		background: #06C36E;
	}

	.index_block_active {
		width: 330rpx;
		height: 70rpx;
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #000000;
		background-color: #FFFFFF;
	}

	.index_header {
		width: 690rpx;
		height: 70rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 80rpx;
	}

	.content {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	page {
		background-color: #F1F2F4;
	}
</style>